<template>
    <div id="task-my-task-container">
        <My_Filter @on-change="changeCondition"/>
        <My_View 
            v-for="(item, index) in list" 
            @on-change="getFromView" 
            :key="`task-my-task-item-${index}`" 
            :item="item" 
            :checkModal="check_modal"/>
        <Page :total="task_list.length" size="small" show-total @on-change="changePage"/>
        <Modal 
            draggable 
            title="任务详情" 
            class="task-my-task-modal" 
            v-model="check_modal"
            @on-ok="commit" 
            :ok-text="getCommitText()" >
            <Scroll>
                <My_Modal :checkTask="check_task" @on-change="getFromModal"/>
            </Scroll>
        </Modal>
    </div>
</template>

<script>

import local_vuex from "@task/js/vuex";
import local_script from "@task/js/util";
import task_request from "@/axios/task";
import My_Filter from "@task/vue/my-task-filter";
import My_View from "@task/vue/my-task-view";
import My_Modal from "@task/vue/my-task-modal";

export default {
    data() {
        return {
            page_size: 10,          // 页面可显示的任务数量
            check_modal: false,     // 是否打开对话框
            check_task: {},         // 对话框中要展示的任务
            task_list: [],          // 从服务器获取的任务列表
            list: [],               // 要展示的任务列表
            complete: false         // 当前任务是否已完成
        }
    },
    mounted() {
        if (this.$store.state.user.sid === "") {
            this.$Notice.warning({
                desc: "你尚未登录"
            });
            return;
        }
        this.changeCondition();
    },
    components: {
        My_Filter,
        My_View,
        My_Modal
    },
    methods: {
        /**
         * 每当筛选条件发生变化时以及页面初始化时调用
         * 查询当前登录学生的任务，并对其进行遍历，每个元素为一个 item
         * 从 item 中取出其中的个人记录，放在 item.me 中，方便后续的展示
         * 最后重新进行分页
         */
        async changeCondition() {
            let user = this.$store.state.user;
            this.task_list = await task_request.queryTask(user.sid);
            this.task_list.forEach(item => {
                let res = this.$jspt.getStudent(user.sid, user.dept, user.group, item.deptList);
                item.me = res;
            })
            local_vuex.state.myTask.initTaskList = this.task_list;
            this.changePage(1);
        },
        /**
         * 分页操作，将当前任务列表，从起始下标 start_index 开始，截取 this.page_size 条记录
         * 截取完成后还要对不足十个的结果进行填充
         * @param {Number} start_index 起始下标
         */
        changePage(start_index) {
            let res = this.$jspt.dividePages(this.task_list, start_index, this.page_size);
            this.list = local_script.fillRecord(res);
        },
        /**
         * 从视图中更新对话框信息（打开与否，待展示任务）
         * @param {Object} v 回调参数
         */
        getFromView(v) {
            this.check_modal = v.checkModal;
            this.check_task = v.item;
        },
        /**
         * 从对话框中更新任务信息（完成与否，任务的文字内容，任务的图片清单）
         * @param {Object} v 回调参数
         */
        getFromModal(v) {
            this.complete = v.complete;
            this.check_task.content = v.content;
            this.check_task.imgs = v.imgs;
        },
        /**
         * 获取对话框中提交按钮的文字内容
         * 已经完成，应显示 "修改"
         * 未完成，应显示 "提交"
         */
        getCommitText() {
            return this.complete ? "修改" : "提交";
        },
        /**
         * 提交任务
         */
        commit() {
            task_request.commit(this.check_task, this.$store.state.user.sid);
        }
    }
}
</script>

<style lang="scss">
@import "@task/scss/my-task-index.scss";
</style>